<template xlang="wxml" minapp="mpvue">
    <view class="_qrCode">
        <canvas class="_qrCodeCanvas" id="_myQrCodeCanvas" canvas-id="_myQrCodeCanvas"
                :style="{width:size+'rem',height:size+'rem'}"/>
        <image v-show="show" :src="result" :style="{width:size+'rem',height:size+'rem'}"/>
    </view>
</template>

<script>
    import QRCode from "./qrcode.js"

    let qrcode
    export default {
        name: "tki-qrcode",
        props: {
            size: {
                type: Number,
                default: 2
            },
            unit: {
                type: String,
                default: 'rem'
            },
            show: {
                type: Boolean,
                default: true
            },
            val: {
                type: String,
                default: ''
            },
            background: {
                type: String,
                default: '#ffffff'
            },
            foreground: {
                type: String,
                default: '#000000'
            },
            pdground: {
                type: String,
                default: '#000000'
            },
            icon: {
                type: String,
                default: ''
            },
            iconSize: {
                type: Number,
                default: 40
            },
            lv: {
                type: Number,
                default: 3
            },
            onval: {
                type: Boolean,
                default: false
            },
            loadMake: {
                type: Boolean,
                default: false
            },
            usingComponents: {
                type: Boolean,
                default: true
            },
            showLoading: {
                type: Boolean,
                default: true
            },
            loadingText: {
                type: String,
                default: '二维码生成中'
            },
        },
        data() {
            return {
                result: '',
                remSize: document.documentElement.style.fontSize.replace('px', '')
            }
        },
        methods: {
            _makeCode() {
                let that = this
                if (!this._empty(this.val)) {
                    qrcode = new QRCode({
                        context: that,
                        usingComponents: that.usingComponents,
                        showLoading: that.showLoading,
                        loadingText: that.loadingText,
                        text: that.val, // 生成内容
                        // size: that.cpSize, // 二维码大小
                        background: that.background, // 背景色
                        foreground: that.foreground, // 前景色
                        pdground: that.pdground, // 定位角点颜色
                        correctLevel: that.lv, // 容错级别
                        image: that.icon, // 二维码图标
                        imageSize: that.iconSize,// 二维码图标大小
                        cbResult: function (res) { // 生成二维码的回调
                            that._result(res)
                        },
                    });
                } else {
                    uni.showToast({
                        title: '二维码内容不能为空',
                        icon: 'none',
                        duration: 2000
                    });
                }
            },
            _clearCode() {
                this._result('')
                qrcode.clear()
            },
            _saveCode() {
                let that = this;
                if (this.result != "") {
                    // uni.chooseImage({
                    // 	count: 1,
                    // 	sizeType: ['original', 'compressed'],
                    // 	sourceType: ['album'],
                    // 	success: function(res) {
                    // 		// 预览图片
                    // 		uni.previewImage({
                    // 			urls: res.tempFilePaths,
                    // 			longPressActions: {
                    // 				itemList: ['发送给朋友', '保存图片', '收藏'],
                    // 				itemColor: "#fff",
                    // 				success: function(data) {
                    // 					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                    // 				},
                    // 				fail: function(err) {
                    // 					console.log(err.errMsg);
                    // 				}
                    // 			}
                    // 		});
                    // 	}
                    // });
                    // console.log(this.result)
                    // 预览图片
                    uni.previewImage({
                        urls: [this.result],
                        current: this.result,
                        longPressActions: {
                            itemList: ['发送给朋友', '保存图片', '收藏'],
                            success: function (data) {
                                plus.nativeUI.alert("1");
                                console.log(data)
                                // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                            },
                            fail: function (err) {
                                console.log(err.errMsg);
                            }
                        }
                    });
                }
            },
            _result(res) {
                this.result = res;
                this.$emit('result', res)
            },
            _empty(v) {
                let tp = typeof v,
                    rt = false;
                if (tp == "number" && String(v) == "") {
                    rt = true
                } else if (tp == "undefined") {
                    rt = true
                } else if (tp == "object") {
                    if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
                } else if (tp == "string") {
                    if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
                } else if (tp == "function") {
                    rt = false
                }
                return rt
            }
        },
        watch: {
            size: function (n, o) {
                if (n != o && !this._empty(n)) {
                    this.cSize = n
                    if (!this._empty(this.val)) {
                        setTimeout(() => {
                            this._makeCode()
                        }, 100);
                    }
                }
            },
            val: function (n, o) {
                if (this.onval) {
                    if (n != o && !this._empty(n)) {
                        setTimeout(() => {
                            this._makeCode()
                        }, 0);
                    }
                }
            }
        },
        computed: {
            cpSize() {
                if (this.unit == "rem") {
                    // console.log()
                     return parseInt(this.size * this.remSize);
                } else {
                    return this.size
                }
            }
        },
        mounted: function () {
            if (this.loadMake) {
                if (!this._empty(this.val)) {
                    setTimeout(() => {
                        this._makeCode()
                    }, 0);
                }
            }
        },
    }
</script>
<style>
    ._qrCode {
        position: relative;
    }

    ._qrCodeCanvas {
        position: fixed;
        top: -99999px;
        left: -99999px;
        z-index: -99999;
    }
</style>
